<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'
// console.log(useRoute());
// let id = useRoute().params.id
// let id = JSON.parse(localStorage.getItem("user"))._id
let router = useRouter()
let id = useRoute().query.id
// 获取房东相关的房屋信息
const userAvatar = ref("") // 存储用户头像的 URL
const name = ref("")    // 存储用户名的变量l
const address = ref("") // 存储地址的变量
const List = ref<any[]>([])  // 存储房东相关房屋信息
const AllList = ref<any[]>([]) // 存储所有房屋信息
let getUserInfo = async () => {
    console.log(id);
    let { data: { data } } = await axios.get(`http://localhost:3000/yg/getUserInfo`, { params: { id: id } })
    List.value = data
    // 获取用户头像 URL
    if (data.length > 0 && data[0].u_id) {
        userAvatar.value = data[0].u_id.landlord // 头像 URL 在 u_id.landlord 中
        name.value = data[0].u_id.admin // 用户名在 u_id.admin 中
        address.value = data[0].c_id.name[0] // 地址在 u_id.address 中
    }
}
// 用于从数组中随机选择指定数量的项
function getRandomItems(array: any[], count: number) {
    const shuffled = array.sort(() => 0.5 - Math.random()) // 随机排序数组
    return shuffled.slice(0, count) // 返回前 count 个元素
}

let getAllHouse = async () => {
    let { data: { data } } = await axios.get("http://localhost:3000/yg/getHome")
    // 将所有房屋信息存入 AllList
    AllList.value = data
    // 随机选择两个房屋信息
    let randomItems = getRandomItems(data, 2)
    // 更新 AllList 为随机选择的两项
    AllList.value = randomItems
}

onMounted(() => {
    getUserInfo()
    getAllHouse()
})
const collect = ref(false)
const clickCollect = () => {
    collect.value = !collect.value
    if (collect.value) {
        showToast({
            message: '收藏成功',
        });
    }
}
const clickisState = async (id: string) => {
    await axios.get("http://localhost:3000/yg/isCollect", { params: { id: id, } }).then(res => {
        if (res.data.code === 200) {
            showToast({
                message: '收藏',
            });
            getUserInfo()
        }
    })

}
const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ]
];
let share = () => {
    showShare.value = true
}
const onSelect = (option) => {
    showToast(option.name);
    showShare.value = false;
    navigator.clipboard.writeText("http://localhost:5173" + window.location.pathname + `?id=${id}`)
    showToast('复制链接成功')
};
</script>
<template>
    <div id="honeInfo">
        <div class="box">
            <div class="top">
                <van-icon name="arrow-left" color="#fff" size="25px" @click="router.back()" />
                <div>
                    <van-icon name="like-o" v-if="!collect" color="#fff" size="25px" @click="clickCollect" />
                    <van-icon name="like" v-else color="red" size="25px" @click="clickCollect" />
                    <van-icon name="share-o" color="#fff" size="25px" style="margin-left: 10px;" @click="share" />
                </div>
            </div>
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="(image, index) in List[0]?.img" :key="image">
                    <img :src="image" style="width: 100%;height:200px ;" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="user">
            <div class="user_top">
                <!-- 用户头像 -->
                <div class="user_left"><img :src="userAvatar" alt=""><span style="margin-left: 10px;">{{ name }}</span>
                </div>
                <button
                    style="width: 80px;height: 30px; background-color: #FFFFFF; border: 1px solid #FF9933; color: #FF9933;">+关注</button>
            </div>
        </div>
        <div class="address">
            <van-icon name="location-o" /><span style="margin-left: 5px;">{{ address }}</span>
        </div>
        <div class="desc">
            <p>国庆假期出游，房间很满意哦，干净卫生，风景好，

                大家相处愉快，值得推荐这个民宿，装修风格简约，店

                家是个小姐姐，推荐了很多地方..</p>
        </div>
        <div class="homeinfo">
            <h2 style="padding-left: 20px;">提到的民宿</h2>
            <div v-for="item in List" :key="item._id" class="homeinfo_item">
                <img :src="item.img[0]" alt="" style="width: 100px;height: 85px;">
                <div style="padding-left: 10px;">
                    <div style="display: flex;justify-content: space-between;">
                        <div>{{ item.name }}</div>
                        <div><van-icon name="like-o" v-if="!item.collect" size="25px" @click="clickisState(item._id)" />
                            <van-icon name="like" v-else color="red" size="25px" @click="clickisState(item._id)" />
                        </div>
                    </div>
                    <p style="margin-top: 5px;">{{ address }}·{{ item.roomNum }}居{{ item.badNum }}床{{ item.visitorNum
                        }}人·{{ item.home_km }}</p>
                    <p style="color: #FF9933;font-size: 20px;margin-top: -20px;">￥{{ item.price }}</p>
                </div>
            </div>
        </div>
        <div class="recommend">
            <h2 style="padding-left: 20px;">为你推荐</h2>

            <div class="context">
                <div v-for="item in AllList" :key="item._id" class="recommend_item">
                    <img :src="item.img[0]" alt="" class="fm">
                    <p>{{ item.name }}</p>
                    <p><van-icon name="location-o" /><span style="margin-left: 5px;">{{ item.c_id.name[0] }}</span></p>
                    <p style="white-space: nowrap; /* 不换行 */
                    overflow: hidden; /* 超出部分隐藏 */
                    text-overflow: ellipsis; /* 文本溢出显示省略号 */
                     max-width: 100%; /* 最大宽度，根据实际情况调整 */">{{ item.desc }}</p>
                    <div style="width: 100%;height: 50px;display: flex; align-items: center;">
                        <img :src="item.u_id.landlord" alt="" style="width: 40px;height: 40px;border-radius: 50%;">
                        <span style="margin-left: 10px;">{{ item.u_id.admin }}</span>

                    </div>
                </div>

            </div>

        </div>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
</template>



<style scoped lang="scss">
body {
    background-color: #f5f5f5;
}

#honeInfo {
    width: 100%;
    height: 100%;
    padding-top: env(safe-area-inset-top); // 使用安全距离

    .box {
        width: 100%;
        height: 200px;

        .top {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 20px;
            padding-right: 20px;
            position: absolute; // 使其可以浮动在轮播图之上
            z-index: 10; // 确保在轮播图上方
        }

        van-swipe {
            height: 200px; // 设置轮播图的高度
        }
    }

    .user {
        width: 100%;
        height: 100px;

        .user_top {
            width: 100%;
            height: 100px;
            padding-left: 10px;
            padding-right: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .user_left {
                display: flex;
                align-items: center;

                img {
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                }
            }

        }
    }

    .address {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
    }

    .desc {
        width: 100%;
        height: 80px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .homeinfo {
        width: 100%;

        .homeinfo_item {
            width: 90%;
            height: 85px;
            display: flex;
            margin: 0 auto;
            margin-top: 20px;
            box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
            border-radius: 10px;

            img {
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }
        }
    }

    .recommend {
        width: 100%;
        margin-top: 20px;

        .context {
            width: 100%;
            display: flex;
            justify-content: space-around;

            .recommend_item {
                width: 40%;
                height: 250px;

                .fm {
                    width: 100%;
                    height: 100px;
                }
            }
        }
    }
}
</style>